<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>用户管理</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css" type="text/css"/>
    <link rel="stylesheet" href="/css/bootstrap-theme.min.css" type="text/css"/>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="/js/bootstrap.min.js" type="application/javascript"></script>
</head>
<body style="text-align: center">
<div th:insert="~{navigation :: nav}"></div>
<h1><b>用户管理</b></h1>
<button type="button" class="btn btn-success" style="float: left" data-toggle="modal" data-target="#addUser">添加用户</button>

<div class="modal fade" id="addUser" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel1">添加用户：</h4>
            </div>
            <form action="/add_user">
                <div class="modal-body">
                    <label style="width: 20%;float: left;padding-top: 6px" for="name">手机号码</label>
                    <input style="width: 70%;float: left;margin-bottom: 10px" type="text"
                           class="form-control" name="uphone">
                    <label style="width: 20%;float: left;padding-top: 6px" for="author">用户名</label>
                    <input style="width: 70%;float: left;margin-bottom: 10px" type="text"
                           class="form-control" name="uname">
                    <label style="width: 20%;float: left;padding-top: 6px" for="num">密码</label>
                    <input style="width: 70%;float: left;margin-bottom: 10px" type="password"
                           class="form-control" name="upassword">
                    <label style="width: 20%;float: left;padding-top: 6px" for="num">权限</label>
                    <input style="width: 70%;float: left;margin-bottom: 10px" type="text"
                           class="form-control" name="uauthority">
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success">确认</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div>
    <table class="table table-striped" style="width: 100%">
        <tr>
            <th style="width: 25%">电话号码</th>
            <th style="width: 25%">用户名</th>
            <th style="width: 25%">权限</th>
            <th style="width: 25%">管理</th>
        </tr>
        <tr th:each="user:${users}">
            <th th:text="${user.phone}"></th>
            <th th:text="${user.name}"></th>
            <th th:text="${user.authority}"></th>
            <th>
                <button style="width: 50%;float: left;" class="btn btn-warning" data-toggle="modal" th:data-target="'#adjust'+${user.phone}">修改</button>
                <form action="/delete_user">
                    <input type="hidden" name="uphone" th:value="${user.phone}">
                    <button style="width: 50%;float: left;" type="submit" class="btn btn-danger" role="button">删除</button>
                </form>
                <div class="modal fade" th:id="'adjust'+${user.phone}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                        aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="myModalLabel">修改：</h4>
                            </div>
                            <form action="/adjust_user">
                                <div class="modal-body">
                                    <input type="hidden" name="uphone" th:value="${user.phone}">
                                    <label style="width: 20%;float: left;padding-top: 6px" for="author">用户名</label>
                                    <input style="width: 70%;float: left;margin-bottom: 10px" type="text" id="author"
                                           class="form-control" name="uname" th:value="${user.name}">
                                    <label style="width: 20%;float: left;padding-top: 6px" for="num">密码</label>
                                    <input style="width: 70%;float: left;margin-bottom: 10px" type="password" id="num"
                                           class="form-control" name="upassword" th:value="${user.password}">
                                    <label style="width: 20%;float: left;padding-top: 6px" for="url">权限</label>
                                    <input style="width: 70%;float: left;margin-bottom: 10px" type="text" id="url"
                                           class="form-control" name="uauthority" th:value="${user.authority}">
                                </div>
                                <div class="modal-footer">
                                    <button type="submit" class="btn btn-danger">确认修改</button>
                                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </th>
            <th>
            </th>
        </tr>
    </table>
</div>
</body>
</html>